<template>
  <SketchRule
    :thick="thick"
    :scale="scale"
    :width="pageSize.width"
    :height="pageSize.height"
    :startX="startX"
    :startY="startY"
    :lines="lines"
    :lang="lang"
  ></SketchRule>
</template>
<script>
  import { SketchRule } from 'vue3-sketch-ruler';
  import 'vue3-sketch-ruler/lib/style.css';
  const rectWidth = 160;
  const rectHeight = 200;
  import { mapGetters } from 'vuex';
  export default {
    data() {
      return {
        scale: 1, //658813476562495, //1,
        lang: 'zh-CN',
        startX: 20,
        startY: 20,
        thick: 20,
        lines: {
          h: [],
          v: [],
        },
      };
    },
    components: {
      SketchRule,
    },
    computed: {
      ...mapGetters(['pageSize']),
    },
    created() {},
  };
</script>
<style lang="scss" scoped>
  #mb-ruler {
    top: 0;
    left: 0;
    position: absolute !important;
  }

  /* 横线 */
  #mb-ruler .v-container .lines .line {
    /* 最大缩放 200% */
    width: 200vw !important;
    border-top: 1px dashed $text-primary !important;
  }
  #mb-ruler .v-container .indicator {
    border-bottom: 1px dashed $text-primary !important;
  }
  /* 竖线 */
  #mb-ruler .h-container .lines .line {
    /* 最大缩放 200% */
    height: 200vh !important;
    border-left: 1px dashed $text-primary !important;
  }
  #mb-ruler .h-container .indicator {
    border-left: 1px dashed $text-primary !important;
  }
  /* 坐标数值背景颜色 */
  #mb-ruler .indicator .value {
    background-color: rgba(0, 0, 0, 0);
  }
  /* 删除按钮 */
  #mb-ruler .line .del {
    padding: 0;
    color: $text-primary;
    font-size: 26px;
    font-weight: bolder;
  }

  #mb-ruler .corner {
    border-width: 0 !important;
  }
</style>
